<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
    </style>
    <script src="./three.js"></script>
    <script src="./OrbitControls.js"></script>
    <script src="./stats.min.js"></script>
  </head>
  <body></body>
  <script type="x-shader/x-vertex" id="vertexShader">
    varying vec2 vUv;
    void main() {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }</script>
  <script type="x-shader/x-vertex" id="fragmentShader">
    varying vec2 vUv;
    uniform vec3 color;
    void main() {
      gl_FragColor = vec4(color, vUv.x);
    }
  </script>
 
  <script>
    var scene, camera, renderer, clock, controller, stats
    var shader_material, textureLoader = new THREE.TextureLoader()
    var spriteArr = [], canvas = null

    init();
    animate();

    // - Functions -
    function init() {
      scene = new THREE.Scene();
      clock = new THREE.Clock();
      camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );
      camera.position.set(10, 10, 10)
      renderer = new THREE.WebGLRenderer({
        antialias: true, // 开启抗锯齿处理
        alpha: true,
      });
      renderer.setClearColor(0xbfd1e5) // set sky color
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setPixelRatio(window.devicePixelRatio)

      var axisHelper = new THREE.AxesHelper(10);
      scene.add(axisHelper);
     
      var directionalLight = new THREE.DirectionalLight(0xffffff, 0.9);
      directionalLight.position.set(400, 200, 300);
      // directionalLight.castShadow = true
      scene.add(directionalLight);
      // 方向光2
      var directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.9);
      directionalLight2.position.set(-400, -200, -300);
      scene.add(directionalLight2);
      //环境光
      var ambient = new THREE.AmbientLight(0x404040, 0.6);
      scene.add(ambient);

      stats = new Stats()
      document.body.appendChild( stats.dom );
      controller = new THREE.OrbitControls(camera, renderer.domElement);

      // --------
      var geometry = new THREE.PlaneBufferGeometry( 20, 20 );
      var material = new THREE.MeshLambertMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
      var plane = new THREE.Mesh( geometry, material );
      plane.rotation.x = -Math.PI/2
      scene.add( plane );
      
      for(let i = 0; i < 20;i++) {
          let sprite = createSprite('./up.png')
          console.log(1)
          sprite.position.set(10 -Math.random()*20, 2, 10 - Math.random()*20)
          scene.add(sprite)
          spriteArr.push(sprite)
        }

        var poiRect = {w:50,h:50}
        var scale = getPoiScale(spriteArr[0].position, poiRect);
        spriteArr.forEach(s => {
          s.scale.set(scale[0],scale[1],1.0)
        })
      controller.addEventListener('change', () => {
        var poiRect = {w:50,h:50}
        var scale = getPoiScale(spriteArr[0].position, poiRect);
        spriteArr.forEach(s => {
          s.scale.set(Math.min(scale[0], 2), Math.min(scale[1], 2),1.0)
        })
        
      })
      // --------

      
      document.body.appendChild(renderer.domElement);
      window.onresize = onResize;
    }

    function createSprite(url) {
      var spriteMaterial = new THREE.SpriteMaterial( { 
        map: textureLoader.load(url)
      } );
      var sprite = new THREE.Sprite( spriteMaterial );
      sprite.scale.set(4, 4, 1)
      return sprite
    }

    function getPoiScale(position,poiRect){
      if(!position) return;
      var distance = camera.position.distanceTo(position);
      var top = Math.tan(camera.fov / 2 * Math.PI / 180)*distance;    //camera.fov 相机的拍摄角度
      var meterPerPixel = 2*top/window.innerHeight
      var scaleX = poiRect.w * meterPerPixel;
      var scaleY = poiRect.h * meterPerPixel;
      return [scaleX,scaleY,1.0];
    }

    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
      stats.update();
      controller.update(clock.getDelta());
    }

    function onResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    }
  </script>
</html>
